<template>
  <div>
    <!-- 两句诗 -->
    <div v-show="twoPoem" class="my-animation-slide-top">
      <twoPoem :isHitokoto="false"></twoPoem>
    </div>
    <div v-show="!twoPoem">
      <myHeader></myHeader>
    </div>
    <!-- Json格式化框 -->
    <div class="comment-wrap">
      <!-- 操作按钮 -->
      <div class="myBetween" style="padding: 20px;flex-wrap: wrap;">
        <!-- 左 -->
        <div style="display: flex">
          <proButton class="comment-btn" :info="'清空'" @click.native="clearComment()" :before="$constant.before_color_0"
            :after="$constant.after_color_1" style="margin-right: 6px">
          </proButton>
        </div>
        <!-- 右 -->
        <div style="display: flex">
          <proButton class="comment-btn" :info="'复制'" v-clipboard:copy="JSON.stringify(data)"
            v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError" :before="$constant.before_color_0"
            :after="$constant.after_color_1" style="margin-right: 6px">
          </proButton>
          <proButton class="comment-btn" :info="'行 开/关'" @click.native="showCommentNum()"
            :before="$constant.before_color_2" :after="$constant.after_color_2" style="margin-right: 6px">
          </proButton>
          <proButton class="comment-btn" :info="'全屏/关闭'" @click.native="fullScreen()" :before="$constant.before_color_2"
            :after="$constant.after_color_2">
          </proButton>
        </div>
      </div>
      <!-- 数据框 -->
      <div class="comment-content">
        <!-- 原始Json数据 -->
        <div style="width: 50%;">
          <textarea class="comment-textarea" v-model="val" placeholder="请输入Json数据" />
        </div>
        <!-- 格式化数据 -->
        <div style="width: 50%;">
          <div class="comment-pretty">
            <vue-json-pretty :virtual="true" :show-length="true" :show-line="true" :show-icon="true"
              :height="prettyHeight" :item-height="+itemHeight" :data="data" :deep="deep" :show-line-number="showNum"
              :collapsed-on-click-brackets="collapsedOnClickBrackets" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

const twoPoem = () => import("../common/twoPoem");
const myHeader = () => import("../common/myHeader");
const proButton = () => import("../common/proButton");

export default {
  components: {
    VueJsonPretty,
    twoPoem,
    myHeader,
    proButton
  },
  data() {
    return {
      val: '',
      data: null,
      twoPoem: true,
      prettyHeight: 492,
      showNum: false,
      collapsedOnClickBrackets: true,
      deep: 4,
      itemHeight: 20,
    }
  },
  watch: {
    val(newVal) {
      try {
        this.data = JSON.parse(newVal);
      } catch (err) {
        console.log('JSON ERROR');
      }
    },
  },
  methods: {
    clearComment() {
      this.val = '';
    },
    showCommentNum() {
      if (!this.showNum) {
        this.showNum = true;
      } else {
        this.showNum = false;
      }
    },
    onCopySuccess() {
      this.$message({
        message: "JSON 复制成功",
        type: "success"
      });
    },
    onCopyError() {
      this.$message({
        message: "JSON 复制失败",
        type: "error"
      });
    },
    fullScreen() {
      if (this.twoPoem) {
        this.twoPoem = false;
        this.prettyHeight = 750;
      } else {
        this.twoPoem = true;
        this.prettyHeight = 492;
      }
    }
  }
}
</script>

<style scoped>
.comment-wrap {
  background: var(--background);
  position: absolute;
  width: 100%;
}

.comment-content {
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.comment-textarea {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  min-height: 100%;
  padding: 20px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: var(--commentURL);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right 100%;
  margin-bottom: 10px;
}

.comment-pretty {
  border: 1px solid var(--lightGray);
  width: 100%;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.comment-btn {
  display: flex;
  height: 26px;
}
</style>